<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高中数学必修一 - 教材详情 - 睿途教育</title>
    <link href="../../assets/css/tailwind.css" rel="stylesheet">
    <link href="../../assets/css/font-awesome.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-0 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途教育</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="dashboard/data-overview.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-list mr-2"></i> 教材列表
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-cogs mr-2"></i> 系统配置
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索教材、章节或知识点..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="#" class="hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="#" class="hover:text-primary">教材管理</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="#" class="hover:text-primary">教材列表</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-primary font-medium">高中数学必修一</span>
            </div>
            
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">高中数学必修一</h2>
                <p class="text-gray-500 mt-1">人民教育出版社 · 高一适用</p>
            </div>

            <!-- 工具栏 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div class="flex flex-wrap gap-2">
                        <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center">
                            <i class="fa fa-edit mr-2"></i> 编辑教材
                        </button>
                        <button class="px-4 py-2 bg-success text-white rounded-md hover:bg-success/90 transition-colors flex items-center">
                            <i class="fa fa-sitemap mr-2"></i> 章节管理
                        </button>
                        <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors flex items-center">
                            <i class="fa fa-download mr-2"></i> 导出教材
                        </button>
                        <div class="relative group">
                            <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors flex items-center">
                                <i class="fa fa-cog mr-2"></i> 更多操作
                                <i class="fa fa-angle-down ml-1"></i>
                            </button>
                            <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
                                <div class="py-2">
                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                        <i class="fa fa-copy mr-2"></i> 复制教材
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                        <i class="fa fa-history mr-2"></i> 操作日志
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-sm text-danger hover:bg-gray-50 transition-colors">
                                        <i class="fa fa-trash mr-2"></i> 删除教材
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-success/10 text-success">
                            <i class="fa fa-check-circle mr-1"></i> 已启用
                        </span>
                    </div>
                </div>
            </div>

            <!-- 教材详情内容 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- 左侧：教材基本信息 -->
                <div class="lg:col-span-1 space-y-6">
                    <!-- 教材封面 -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">教材封面</h3>
                        <div class="flex justify-center">
                            <img src="https://picsum.photos/id/24/300/400" alt="高中数学必修一封面" class="rounded shadow-md max-w-full h-auto">
                        </div>
                        <div class="mt-4 text-center">
                            <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">
                                <i class="fa fa-upload mr-1"></i> 更换封面
                            </button>
                        </div>
                    </div>

                    <!-- 基本信息 -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">基本信息</h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-500">教材名称</span>
                                <span class="font-medium">高中数学必修一</span>
                            </div>
                            <div class="border-t border-gray-100 pt-3 flex justify-between">
                                <span class="text-gray-500">学科</span>
                                <span class="font-medium">数学</span>
                            </div>
                            <div class="border-t border-gray-100 pt-3 flex justify-between">
                                <span class="text-gray-500">适用年级</span>
                                <span class="font-medium">高一</span>
                            </div>
                            <div class="border-t border-gray-100 pt-3 flex justify-between">
                                <span class="text-gray-500">出版社</span>
                                <span class="font-medium">人民教育出版社</span>
                            </div>
                            <div class="border-t border-gray-100 pt-3 flex justify-between">
                                <span class="text-gray-500">创建时间</span>
                                <span class="font-medium">2023-09-01</span>
                            </div>
                            <div class="border-t border-gray-100 pt-3 flex justify-between">
                                <span class="text-gray-500">最后更新</span>
                                <span class="font-medium">2023-10-15</span>
                            </div>
                            <div class="border-t border-gray-100 pt-3 flex justify-between">
                                <span class="text-gray-500">创建人</span>
                                <div class="flex items-center">
                                    <img src="https://picsum.photos/id/1/32/32" alt="用户头像" class="w-5 h-5 rounded-full mr-1">
                                    <span class="font-medium">李老师</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 统计信息 -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">教材统计</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-gray-50 rounded-lg p-4 text-center">
                                <div class="text-2xl font-bold text-primary mb-1">8</div>
                                <div class="text-sm text-gray-600">章节数</div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 text-center">
                                <div class="text-2xl font-bold text-success mb-1">42</div>
                                <div class="text-sm text-gray-600">知识点</div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 text-center">
                                <div class="text-2xl font-bold text-warning mb-1">356</div>
                                <div class="text-sm text-gray-600">关联题目</div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 text-center">
                                <div class="text-2xl font-bold text-danger mb-1">12</div>
                                <div class="text-sm text-gray-600">使用次数</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧：教材详细信息 -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- 教材描述 -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">教材描述</h3>
                        <div class="prose max-w-none text-gray-700">
                            <p>《高中数学必修一》是根据《普通高中数学课程标准》编写的教材，主要面向高一学生，内容涵盖集合、函数概念与基本初等函数等高中数学基础内容。</p>
                            <p class="mt-3">本教材注重培养学生的数学思维能力和解决实际问题的能力，通过丰富的实例和习题，帮助学生建立数学知识体系，为后续学习打下坚实基础。</p>
                            <p class="mt-3">教材内容编排合理，难度循序渐进，适合高中一年级学生使用，也可作为高中数学入门自学教材。</p>
                        </div>
                    </div>

                    <!-- 章节列表 -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-gray-800">章节列表</h3>
                            <button class="px-3 py-1 text-sm bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                                <i class="fa fa-plus mr-1"></i> 添加章节
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <!-- 章节1 -->
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center cursor-pointer">
                                    <div class="flex items-center">
                                        <i class="fa fa-chevron-down text-gray-400 mr-2"></i>
                                        <span class="font-medium">第一章：集合与函数概念</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">3个小节</span>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary transition-colors" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="px-8 py-2 bg-white">
                                    <div class="pl-4 border-l-2 border-gray-200 py-2">
                                        <div class="flex justify-between items-center">
                                            <span class="text-gray-700">1.1 集合</span>
                                            <div class="text-sm text-gray-500">8个知识点</div>
                                        </div>
                                    </div>
                                    <div class="pl-4 border-l-2 border-gray-200 py-2">
                                        <div class="flex justify-between items-center">
                                            <span class="text-gray-700">1.2 函数及其表示</span>
                                            <div class="text-sm text-gray-500">6个知识点</div>
                                        </div>
                                    </div>
                                    <div class="pl-4 border-l-2 border-gray-200 py-2">
                                        <div class="flex justify-between items-center">
                                            <span class="text-gray-700">1.3 函数的基本性质</span>
                                            <div class="text-sm text-gray-500">5个知识点</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 章节2 -->
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center cursor-pointer">
                                    <div class="flex items-center">
                                        <i class="fa fa-chevron-right text-gray-400 mr-2"></i>
                                        <span class="font-medium">第二章：基本初等函数（Ⅰ）</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">3个小节</span>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary transition-colors" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            


                            <!-- 章节3 -->
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center cursor-pointer">
                                    <div class="flex items-center">
                                        <i class="fa fa-chevron-right text-gray-400 mr-2"></i>
                                        <span class="font-medium">第三章：函数的应用</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">2个小节</span>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary transition-colors" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 章节4 -->
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center cursor-pointer">
                                    <div class="flex items-center">
                                        <i class="fa fa-chevron-right text-gray-400 mr-2"></i>
                                        <span class="font-medium">第四章：三角函数</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">4个小节</span>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary transition-colors" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 章节5 -->
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center cursor-pointer">
                                    <div class="flex items-center">
                                        <i class="fa fa-chevron-right text-gray-400 mr-2"></i>
                                        <span class="font-medium">第五章：平面向量</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">4个小节</span>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary transition-colors" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 章节6 -->
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center cursor-pointer">
                                    <div class="flex items-center">
                                        <i class="fa fa-chevron-right text-gray-400 mr-2"></i>
                                        <span class="font-medium">第六章：数列</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">3个小节</span>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary transition-colors" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 章节7 -->
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center cursor-pointer">
                                    <div class="flex items-center">
                                        <i class="fa fa-chevron-right text-gray-400 mr-2"></i>
                                        <span class="font-medium">第七章：不等式</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">3个小节</span>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary transition-colors" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 章节8 -->
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center cursor-pointer">
                                    <div class="flex items-center">
                                        <i class="fa fa-chevron-right text-gray-400 mr-2"></i>
                                        <span class="font-medium">第八章：立体几何初步</span>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">3个小节</span>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary transition-colors" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 关联题目统计 -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">关联题目统计</h3>
                        <div class="space-y-4">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium text-gray-700">选择题</span>
                                    <span class="text-sm text-gray-500">120题</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 33%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium text-gray-700">填空题</span>
                                    <span class="text-sm text-gray-500">85题</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-success h-2 rounded-full" style="width: 24%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium text-gray-700">解答题</span>
                                    <span class="text-sm text-gray-500">151题</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-warning h-2 rounded-full" style="width: 43%"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <h4 class="text-base font-medium text-gray-800 mb-3">最近更新的题目</h4>
                            <div class="overflow-x-auto">
                                <table class="w-full text-sm">
                                    <thead>
                                        <tr class="border-b border-gray-200">
                                            <th class="text-left py-2 px-3 font-medium text-gray-600">题目ID</th>
                                            <th class="text-left py-2 px-3 font-medium text-gray-600">题目类型</th>
                                            <th class="text-left py-2 px-3 font-medium text-gray-600">关联章节</th>
                                            <th class="text-left py-2 px-3 font-medium text-gray-600">难度</th>
                                            <th class="text-left py-2 px-3 font-medium text-gray-600">更新时间</th>
                                            <th class="text-left py-2 px-3 font-medium text-gray-600">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td class="py-2 px-3 text-gray-800">MATH-1001</td>
                                            <td class="py-2 px-3 text-gray-600">选择题</td>
                                            <td class="py-2 px-3 text-gray-600">1.1 集合</td>
                                            <td class="py-2 px-3">
                                                <span class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-full">中等</span>
                                            </td>
                                            <td class="py-2 px-3 text-gray-600">2023-10-15</td>
                                            <td class="py-2 px-3">
                                                <button class="text-primary hover:text-primary/80 transition-colors">查看</button>
                                            </td>
                                        </tr>
                                        <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td class="py-2 px-3 text-gray-800">MATH-1002</td>
                                            <td class="py-2 px-3 text-gray-600">解答题</td>
                                            <td class="py-2 px-3 text-gray-600">1.3 函数的基本性质</td>
                                            <td class="py-2 px-3">
                                                <span class="px-2 py-1 text-xs bg-danger/10 text-danger rounded-full">较难</span>
                                            </td>
                                            <td class="py-2 px-3 text-gray-600">2023-10-12</td>
                                            <td class="py-2 px-3">
                                                <button class="text-primary hover:text-primary/80 transition-colors">查看</button>
                                            </td>
                                        </tr>
                                        <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td class="py-2 px-3 text-gray-800">MATH-1003</td>
                                            <td class="py-2 px-3 text-gray-600">填空题</td>
                                            <td class="py-2 px-3 text-gray-600">2.1 指数函数</td>
                                            <td class="py-2 px-3">
                                                <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">容易</span>
                                            </td>
                                            <td class="py-2 px-3 text-gray-600">2023-10-10</td>
                                            <td class="py-2 px-3">
                                                <button class="text-primary hover:text-primary/80 transition-colors">查看</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 使用记录 -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">使用记录</h3>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-gray-200">
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">使用时间</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">使用教师</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">使用班级</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">使用内容</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">使用时长</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                        <td class="py-2 px-3 text-gray-600">2023-10-10</td>
                                        <td class="py-2 px-3">
                                            <div class="flex items-center">
                                                <img src="https://picsum.photos/id/10/32/32" alt="用户头像" class="w-5 h-5 rounded-full mr-1">
                                                <span>王老师</span>
                                            </div>
                                        </td>
                                        <td class="py-2 px-3 text-gray-600">高一(1)班</td>
                                        <td class="py-2 px-3 text-gray-600">1.1 集合</td>
                                        <td class="py-2 px-3 text-gray-600">45分钟</td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                        <td class="py-2 px-3 text-gray-600">2023-10-08</td>
                                        <td class="py-2 px-3">
                                            <div class="flex items-center">
                                                <img src="https://picsum.photos/id/11/32/32" alt="用户头像" class="w-5 h-5 rounded-full mr-1">
                                                <span>张老师</span>
                                            </div>
                                        </td>
                                        <td class="py-2 px-3 text-gray-600">高一(3)班</td>
                                        <td class="py-2 px-3 text-gray-600">1.2 函数及其表示</td>
                                        <td class="py-2 px-3 text-gray-600">45分钟</td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                        <td class="py-2 px-3 text-gray-600">2023-10-05</td>
                                        <td class="py-2 px-3">
                                            <div class="flex items-center">
                                                <img src="https://picsum.photos/id/12/32/32" alt="用户头像" class="w-5 h-5 rounded-full mr-1">
                                                <span>李老师</span>
                                            </div>
                                        </td>
                                        <td class="py-2 px-3 text-gray-600">高一(2)班</td>
                                        <td class="py-2 px-3 text-gray-600">1.1 集合</td>
                                        <td class="py-2 px-3 text-gray-600">45分钟</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4 mt-6">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-file-text-o mr-1"></i> 使用条款
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-shield mr-1"></i> 隐私政策
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 章节折叠/展开功能
            const chapterHeaders = document.querySelectorAll('.border.border-gray-200 .bg-gray-50');
            chapterHeaders.forEach(header => {
                header.addEventListener('click', function() {
                    const icon = this.querySelector('i.fa');
                    const content = this.nextElementSibling;
                    
                    if (icon.classList.contains('fa-chevron-right')) {
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                        content.style.display = 'block';
                    } else {
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-right');
                        content.style.display = 'none';
                    }
                });
            });
            
            // 默认展开第一个章节
            if (chapterHeaders.length > 0) {
                const firstIcon = chapterHeaders[0].querySelector('i.fa');
                const firstContent = chapterHeaders[0].nextElementSibling;
                firstIcon.classList.remove('fa-chevron-right');
                firstIcon.classList.add('fa-chevron-down');
                firstContent.style.display = 'block';
            }

            // 导航栏滚动效果
            const header = document.querySelector('header');
            window.addEventListener('scroll', function() {
                if (window.scrollY > 10) {
                    header.classList.add('shadow-md');
                    header.classList.remove('shadow-sm');
                } else {
                    header.classList.remove('shadow-md');
                    header.classList.add('shadow-sm');
                }
            });
        });
    </script>
</body>

</html>